<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>业主操作页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet"
          href="${ctx}/resources/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/css/admin.css" media="all">
    <link rel="stylesheet"
          href="${ctx}/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css"
          type="text/css">
    <link rel="stylesheet" href="${ctx}/resources/css/addClass.css"
          media="all" />
    <style type="text/css">
        .layui-form-label {
            width: 90px;
        }

        .layui-input-block {
            margin-left: 120px;
        }
    </style>
</head>

<body>
<div class="layui-bg-white">

    <input type="hidden" value="1026" id="area"/>

    <input type="hidden" value="${areaid}" id="area"/>
    <div class="layui-fluid" style="margin-top:5px;">
        <div class="layui-row  layui-col-space15">
            <form class="layui-form" method="">

				<input type="hidden" name="type" id="type" />
                <input type="hidden" name="id" id="id" value="${owner.id }" />

                <div class="layui-form-item" id="div-two">
                    <div style="float: left;">
                        <label class="layui-form-label">小区:</label>
                        <div class="layui-input-block">
                            <select id="residential" name="residential" lay-filter="rselect">
                                <option value="">---请选择小区---</option>
                                <c:forEach items="${rlist}" var="r">
                                    <option value="${r.id}">${r.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div style="float: left;">
                        <label class="layui-form-label">栋:</label>
                        <div class="layui-input-block">
                            <select id="building" name="building" lay-filter="bselect">
                            </select>
                        </div>
                    </div>

                    <div style="float: left;">
                        <label class="layui-form-label">门牌号:</label>
                        <div class="layui-input-block">
                            <select id="doornumid" name="doornumid" lay-filter="dselect">
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" >
                    <label class="layui-form-label">户号:</label>
                    <div class="layui-input-block" id="div-three">
                        <input type="text" name="useraccount" id="useraccount"
                               value="${owner.useraccount }" lay-verify="required|useraccount"
                               autocomplete="off" placeholder="请输入业主账户（必填）" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="div-four">
                    <label class="layui-form-label">户名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username"
                               value="${owner.username }" lay-verify="required|username" autocomplete="off"
                               placeholder="请输入业主名称（必填）" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="div-five">
                    <label class="layui-form-label">证件类型:</label>
                    <div class="layui-input-block">
                        <select name="documenttype" id="documenttype"  lay-filter="test">
                            <option value="">---请选择证件类型（必选）---</option>
                            <option value="0" <c:if test="${owner.documenttype == 0}">selected="selected"</c:if> >居民身份证</option>
                            <!-- <option value="1" <c:if test="${owner.documenttype == 1}">selected="selected"</c:if> >户口本</option>
								<option value="2" <c:if test="${owner.documenttype == 2}">selected="selected"</c:if> >军官证</option>
								<option value="3" <c:if test="${owner.documenttype == 3}">selected="selected"</c:if> >护照</option>
								<option value="4" <c:if test="${owner.documenttype == 4}">selected="selected"</c:if> >营业执照</option>-->
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" id="div-six">
                    <label class="layui-form-label">证件号码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="idnum" id="idnum"
                               value="${owner.idnum }" lay-verify="idnum" autocomplete="off"
                               placeholder="请输入证件号码（必填）" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item" id="div-seven">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-block">
                        <input name="sex"  type="radio" value="1" title="男" <c:if test="${owner.sex == 1}">checked="checked"</c:if>  />
                        <input name="sex"  type="radio"  value="0" title="女" <c:if test="${owner.sex == 0}">checked="checked"</c:if>  />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="phone"
                               value="${owner.phone }" lay-verify="phone" autocomplete="off"
                               placeholder="请输入手机号码（必填）" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">收费模式:</label>
                    <div class="layui-input-block">
                        <select name="operationmode" id="operationmode">
                            <option value="">---请选择收费模式（必选）---</option>
                            <c:forEach items="${payList}" var="pay">
                                <option value="${pay.id }"  <c:if test="${pay.id == owner.operationmode}">selected="selected"</c:if> >${pay.paymode}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用户单价:</label>
                    <div class="layui-input-block">
                        <select  name="userunitprice" id="userunitprice">
                            <option value="">---请选择用户单价（必选）---</option>
                            <c:forEach items="${moneyList}" var="money">
                                <option value="${money.id }"  <c:if test="${owner.userunitprice == money.id}">selected="selected"</c:if> >${money.type}-(${money.price}元/吨)</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
							<textarea placeholder="请输入内容" name="describe" id="describe"
                                      style="resize:none" class="layui-textarea">${owner.describe }</textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit  lay-filter="demo1" id="demo1">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="${ctx}/resources/js/layui.all.js"></script>
<script src="${ctx}/resources/js/jquery-1.11.2.min.js"></script>
<script src="${ctx}/resources/plugins/layui/layui.js"></script>
<script src="${ctx}/resources/js/formatTime.js"></script>
<script src="${ctx}/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    var id=$("#id").val();
    if (id != "" && id != null) {
        $("#div-two").attr("style","display:none");
        $("#div-three").html("<label class=\"layui-form-mid\">${owner.useraccount }</label>");
        $("#idnum").attr("disabled",false);
    }




    $(function() {
        $("#code").focus();
        initxiaoqu();
    });
    function initxiaoqu(){
            var aid = '${areaid}';
            $.ajax({
                type : 'POST',
                url : '${ctx}/residential/getResidential.action',
                data : {
                    areaid : aid
                },
                dataType : 'json',
                success : function(data) {
                    $("#doornumid").html("");
                    var mphoption = $("<option>").val("").text("---请选择门牌号---");
                    $("#doornumid").append(mphoption);
                    $("#building").html("");
                    var xqdoption = $("<option>").val("").text("---请选择小区栋号---");
                    $("#building").append(xqdoption);
                    $.each(data, function(key, val) {
                        var option1 = $("<option>").val(val.id).text(val.name);
                        $("#residential").append(option1);
                       
                    });
                }
            });
    }






    layui.use(['form', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer


      form.on('select(test)', function(data){
            var documenttype=$("#documenttype").val();
            if (documenttype!='' && documenttype!=null) {
                $("#idnum").attr('disabled',false);
            }else{
                $("#idnum").attr('disabled',true);
                $("#idnum").val('');

            }
        });




        //自定义验证规则
        /*form.verify({
            //户号
            useraccount:function(value, item){ //value：表单的值、item：表单的DOM对象
                if (value.length==0) {
                    return '请输入户号'
                }

            },


            //户名
            username:function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value.length==0){

                    return '请输入户名';
                }

            },*/
            //身份证号的正则验证
       /*    idnum:[/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,'请输入正确的身份证格式'],

            //手机号码的正则
            phone:[/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, '手机请输入正确的格式！']
        });*/

        //监听提交
        form.on('submit(demo1)', function (data) {
        
                var type = 'add';
		        var id = $("#id").val();
		        if(id != null && id != ''){
		            type = 'edit';
		
		        }
		        $("#type").val(type);
        
            $("#demo1").attr('disabled',true); //设置提交禁用防止重复提交数据
            var documenttype=$("#documenttype").val();
            if (documenttype==null || documenttype=='') {
                layer.msg('请选择证件类型！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#documenttype").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }
          var idnum=$("#idnum").val();
            if (idnum==null || idnum=='') {
                layer.msg('请输入身份证号！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#idnum").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }
             var re=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if (!re.test(idnum)) {
                layer.msg('请输入正确的身份证号格式！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#idnum").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;

            }
            var sex = $('input:radio[name="sex"]:checked').val();
            if (sex==null || sex=='') {
                layer.msg('请选择性别！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }
            var phone=$("#phone").val();
            if (phone==null || phone=='') {
                layer.msg('请输入手机号！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#phone").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }
            var res=/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
            if (!res.test(phone)) {
                layer.msg('请输入正确的手机号格式！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#phone").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;

            }
            var operationmode=$("#operationmode").val();
            if (operationmode==null || operationmode=='') {
                layer.msg('请选择收费模式！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#operationmode").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }

            var userunitprice=$("#userunitprice").val();
            if (userunitprice==null || userunitprice=='') {
                layer.msg('请选择用户单价！', {
                    icon: 5,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $("#userunitprice").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            }

            function isCkeckUserAccount(data){
                var num;
                $.ajax({
                    type : "POST", //提交方式
                    url : "${ctx}/owner/isCkeckUserAccount.action", //路径
                    data : data, //数据，这里使用的是Json格式进行传输
                    dataType : "json",
                    async : false,
                    success : function(result) { //返回数据根据结果进行相应的处理
                        num = result;
                    }
                });
                return num;
            };
            var data = $("form").serialize();
            var num = isCkeckUserAccount(data);
            if(num != 0 && num != -1){
                layer.msg('户号已存在,请重新输入！', {
                    icon : 7,
                    time : 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function() {
                    $("#useraccount").focus();
                    $("#demo1").attr('disabled', false);
                });
                return false;
            };
            $.ajax({
                type : "POST", //提交方式
                url : "${ctx}/owner/save.action", //路径
                data : data, //数据，这里使用的是Json格式进行传输
                dataType : "json",
                async : false,
                success : function(result) { //返回数据根据结果进行相应的处理
                    var status = result.status;
                    var msg = result.msg;
                    layer.msg(msg, {
                        icon : 1,
                        time : 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function() {
	                    var index = parent.layer.getFrameIndex(window.name);
	                    parent.layer.close(index); 
	                    window.parent.raloadts();
                    });


                }
            });
            return false;

        });

        form.on('select(rselect)', function(data) {
            var residentiaid = (data.value);
            $.ajax({
                type : 'POST',
                url : '${ctx}/building/getBuilding.action',
                data : {
                    residentialid : residentiaid
                },
                dataType : 'json',
                success : function(data) {
                    $("#doornumid").html("");
                    var mphoption = $("<option>").val("").text("---请选择门牌号---");
                    $("#doornumid").append(mphoption);
                    form.render('select');
                    $("#building").html("");
                    var xqdoption = $("<option>").val("").text("---请选择小区栋号---");
                    $("#building").append(xqdoption);
                    form.render('select');
                    $.each(data, function(key, val) {
                        var option1 = $("<option>").val(val.id).text(val.building);
                        $("#building").append(option1);
                        form.render('select');
                    });
                }
            });
        });

        form.on('select(bselect)', function(data) {
            var buildingid = (data.value);
            $.ajax({
                type : 'POST',
                url : '${ctx}/door/getOwnerDoor.action',
                data : {
                    buildingid : buildingid
                },
                dataType : 'json',
                success : function(data) {
                    $("#doornumid").html("");
                    var option = $("<option>").val("").text("---请选择门牌号---");
                    $("#doornumid").append(option);
                    form.render('select');
                    $.each(data, function(key, val) {
                        var option1 = $("<option>").val(val.id).text(val.doornum);
                        $("#doornumid").append(option1);
                        form.render('select');
                    });
                }
            });
        });


        form.on('select(dselect)', function(data) {
            //alert(data.value);
        });

    });

    function closes(){
        var index = window.parent.layer.getFrameIndex(window.name); //获取窗口索引
        window.parent.layer.close(index);
        window.parent.raloadts();
    }
</script>
</html>
